﻿
<div id="demo">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body collapse show">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="inputPassword6" class="form-Newlable">客户名称</label>
                            <input type="text" id="inputPassword6" class="form-control mx-sm-2" v-model="LikeList.TSC_NAME_LIKE">

                            <input type="checkbox" id="TSC_STATUS" v-model="LikeList.TSC_STATUS_LIKE">
                            <label class="mx-sm-2" for="TSC_STATUS">启用</label>

                            <button type="button" class="btn waves-effect waves-light btn-success " v-on:click="Query"><i class="fa fa-search"></i> 查询</button>
                            <button type="button" class="btn waves-effect waves-light btn-info mx-sm-2" v-on:click="OpenMode"><i class="fa fa-plus"></i> 新增</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-lg-3 col-md-6 " v-for="x in UserList">
            <div class="card card-body">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="card-title">{{x.TSC_NAME}}</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p class="card-text"><i class="fa fa-user-circle"></i>  {{x.TSC_LINKMAN}}</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <p class="card-text"><i class="fa fa-phone"></i>  {{x.TSC_LINKMOBILE}}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="card-text"><i class="fa fa-headphones"></i>  {{x.TSC_LINKTEL}}</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <p class="card-text"><i class="fa fa-envelope"></i>  {{x.TSC_EMAIL}}</p>
                    </div>
                </div>

                <div class="row button-group m-t-10">
                    <div class="col-lg-6 col-md-6">
                        <button type="button" class="btn waves-effect waves-light btn-block btn-info" v-on:click="OpenMode(x)">编辑</button>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <button type="button" class="btn waves-effect waves-light btn-block btn-danger" v-on:click="Delete(x)">删除</button>
                    </div>
                </div>
                <img src="~/res/image/zf.png" style="position:absolute;top:0px; right:0px; width:100px" v-if="x.TSC_STATUS==1" />
            </div>
        </div>

    </div>

    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg  modal-dialog-centered">
            <form class="modal-content" novalidate>
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">客户信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div>
                    <div class="form-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-outline-info">

                                    <div class="card-body">

                                        <div class="form-body">

                                            <div class="row">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">客户名称<span class="text-danger">*</span></label>
                                                    <input type="text" v-validate="'required'" name="客户名称" class="form-control mx-sm-2" required v-model="GridData.TSC_NAME">
                                                    <span style="color:red;text-align:right" v-cloak class="col-md-8">{{ errors.first('客户名称') }}</span>
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">联系人</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_LINKMAN">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable ">固定电话</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_LINKTEL">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">手机号码</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_LINKMOBILE">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">传真</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_FAX">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">电子邮箱</label>
                                                    <input type="text" class="form-control mx-sm-2" v-validate="'email'" name="电子邮箱" v-model="GridData.TSC_EMAIL">
                                                    <span style="color:red;text-align:right" v-cloak class="col-md-8">{{ errors.first('电子邮箱') }}</span>
                                                </div>
                                            </div>


                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">支付宝账号</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_ZFB">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">微信账号</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_WCHAR">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">开户名称</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_BANKNAME">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable">开户银行</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_BANK">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">银行账号</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_BANKCODE">
                                                </div>
                                                <div class="form-inline col-md-6">
                                                    <label class="form-Newlable text-righ">发票抬头</label>
                                                    <input type="text" class="form-control mx-sm-2" v-model="GridData.TSC_FAXHEARD">
                                                </div>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="col-md-12">
                                                    <label class="form-Newlable col-md-2">地址</label>
                                                    <input type="text" class="form-control col-md-10" v-model="GridData.TSC_ADDER">
                                                </div>
                                            </div>

                                            <div class="row m-t-10" v-if="GridData.TSC_DID!=undefined">
                                                <div class="col-md-6">

                                                    <label class="form-Newlable">状态</label>

                                                    <input type="radio" id="one" value="0" v-model="GridData.TSC_STATUS">
                                                    <label for="one">启用</label>

                                                    <input type="radio" id="two" value="1" v-model="GridData.TSC_STATUS">
                                                    <label for="two">停用</label>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">保存</button>
                    <button type="button" class="btn waves-effect waves-light btn-default btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>


</div>



<script type="text/javascript">
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize('zh_CN');

    VeeValidate.Validator.localize({
        zh_CN: {
            messages: {
                required: function (name) { return name + "不能为空"; },
                email: function () { return "邮箱格式无效"; }
            }
        }
    });
    var vm = new Vue({
        el: "#demo",
        data: {
            UserList: [],
            LikeList: { TSC_NAME_LIKE: "", TSC_STATUS_LIKE: true },
            GridData: {
                TSC_DID: "",
                TSC_NAME: "",
                TSC_FAX: "",
                TSC_EMAIL: "",
                TSC_LINKMAN: "",
                TSC_LINKTEL: "",
                TSC_LINKMOBILE: "",
                TSC_ADDER: "",
                TSC_ZFB: "",
                TSC_WCHAR: "",
                TSC_BANKNAME: "",
                TSC_BANK: "",
                TSC_BANKCODE: "",
                TSC_FAXHEARD: "",
                TSC_STATUS: "0"
            }
        }, mounted: function () {
            this.Query();
        },
        methods: {
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../Essential/Customer?act=data", _self.LikeList,
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            Delete: function (moX) {
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../Essential/Customer", { act: 'delete', TSC_DID: moX.TSC_DID },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    //moX.TSC_STATUS = state;
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                } else {
                                    swal("操作失败!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function (moX) {
                this.GridData = Object.assign({}, moX);
                if (this.GridData.TSC_STATUS === undefined || this.GridData.TSC_STATUS === "") {
                    this.GridData.TSC_STATUS = "0";
                }
                $('#UserModal').modal('toggle');
            },
            saveData: function () {

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        $.post("../Essential/Customer?act=save", this.GridData,
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                    $('#UserModal').modal('toggle');
                                } else {
                                    swal("提示!", data.message);
                                }
                            });
                    }
                })
            }
        }
    });
</script>
